<template>
    <view class="container">
        <!-- Main Start -->
        <view class="main bg-white">
            <view>
                <tabs :isScroll="false" :current="current" height="100" bar-width="60">
                    <tab name="免费课程">
                        <view class="mx-2">
                            <course-list type="study" :list="courseList.fee_list"></course-list>
                            <empty v-if="courseList.fee_list.length == 0"></empty>
                        </view>
                    </tab>
                    <tab name="收费课程">
                        <view class="mx-2">
                            <course-list type="study" :list="courseList.charge_list"></course-list>
                            <empty v-if="courseList.charge_list.length == 0"></empty>
                        </view>
                    </tab>
                </tabs>
            </view>
        </view>
        <!-- 底部导航 -->
        <tabbar />

        <!-- 骨架屏 -->
        <skeleton v-show="loading && isLogin"></skeleton>
    </view>
</template>

<script lang="ts" setup>
import { ref, shallowRef, computed, unref } from 'vue'
import { apiCtudyCourseLists } from '@/api/store'
import { useUserStore } from '@/stores/user'
import Skeleton from './component/skeleton.vue'
import empty from './component/empty.vue'
import CourseList from '@/components/course-list/index.vue'
import { onShow } from '@dcloudio/uni-app'

const userStore = useUserStore()
const courseList = ref({
    charge_list: [],
    fee_list: []
})
// 加载状态
const loading = ref<boolean>(true)

const current = ref(0)

// 是否登录
const isLogin = computed(() => userStore.token)

const queryList = async () => {
    try {
        const { free, fee } = await apiCtudyCourseLists()
        courseList.value.fee_list = free
        courseList.value.charge_list = fee
        loading.value = false
        // paging.value.complete([true])
    } catch (e) {
        loading.value = false
        console.log('报错=>', e)
        // paging.value.complete(false)
    }
}

onShow(() => {
    queryList()
})
</script>

<style lang="scss">
.container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
}

.main {
    flex: 1;
    min-height: 0;
    overflow: scroll;

    swiper {
        height: 100%;
    }

    .title {
        font-size: 36rpx;
        font-weight: 500;
        padding: 24rpx 30rpx;
        color: $color-text-deep;
    }
}
</style>
